<template>
  <div class="app-container">
    <el-card
      shadow="hover"
      class="maBt15"
      v-if="checkPermission(['operateLog@index'])"
    >
      <el-form inline>
        <!-- 模块名称 -->
        <el-form-item :label="$t('log.log1')">
          <el-input
            v-model="formInline.module"
            clearable
            :placeholder="$t('log.log1')"
            style="width: 150px"
            class="filter-item"
          />
        </el-form-item>
        <el-button class="filter-item" type="primary" @click="toQuery">{{
          $t("common.common4")
        }}</el-button>
      </el-form>
    </el-card>
    <el-card shadow="hover">
      <el-table
        v-loading="loading"
        ref="table"
        border
        highlight-current-row
        :data="dataList"
        row-key="id"
        v-permission="['operateLog@index']"
        :max-height="$store.state.app.tableHeight"
      >
        <el-table-column prop="id" min-width="80" fixed="left" label="ID" />
        <!-- 模块名称 -->
        <el-table-column
          prop="module"
          :label="$t('log.log1')"
          min-width="180px">
          <template slot-scope="scope">
            <span>{{$store.state.settings.langTail == "zh"
            ? scope.row.module
            : scope.row['module_'+$store.state.settings.langTail]}}</span>
          </template>
        </el-table-column>
        <!-- 列表 -->
        <el-table-column
          prop="operate"
          :label="$t('log.log2')"
          min-width="180px"
        >
        <template slot-scope="scope">
            <span>{{$store.state.settings.langTail == "zh"
            ? scope.row.operate
            : scope.row['operate_'+$store.state.settings.langTail]}}</span>
          </template>
        </el-table-column>
        <!-- 路由 -->
        <el-table-column
          prop="route"
          :label="$t('log.log3')"
          min-width="180px"
        />
        <!-- 参数 -->
        <el-table-column
          prop="params"
          :label="$t('log.log4')"
          min-width="250px"
        />
        <el-table-column prop="ip" label="IP" min-width="120px" />
        <!-- 请求方式 -->
        <el-table-column
          prop="method"
          :label="$t('log.log5')"
          min-width="120px"
        />
        <!-- 创建时间 -->
        <el-table-column
          prop="created_at"
          :label="$t('vip.vip4')"
          min-width="180px"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.created_at) }}</span>
          </template>
        </el-table-column>
        <!-- 操作人 -->
        <el-table-column
          prop="creator"
          :label="$t('log.log6')"
          min-width="180px"
        />
      </el-table>
      <!--分页组件-->
      <pagination
        v-permission="['operateLog@index']"
        :total="tableShow.listCount"
        :page.sync="tableShow.currentPage"
        :page-size.sync="tableShow.pageSize"
        @pageChange="getList"
      />
    </el-card>
  </div>
</template>

<script>
import { getLog } from "@/api/system/log";
import { parseTime } from "@/utils/index";
export default {
  data() {
    return {
      loading: false,
      dataList: [],
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0,
      },
      formInline: {
        module: "",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    parseTime,
    toQuery() {
      this.tableShow.currentPage = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      getLog(
        Object.assign({}, this.formInline, {
          page: this.tableShow.currentPage,
          limit: this.tableShow.pageSize,
        })
      ).then((res) => {
        this.loading = false;
        this.dataList = res.data;
        this.tableShow.listCount = res.count;
      });
    },
  },
};
</script>